import { useState, useCallback } from 'react';
import {
  Fab,
  Drawer,
  Box,
  IconButton,
  Typography,
  Badge,
  Zoom,
  useTheme,
  alpha
} from '@mui/material';
import {
  Message as MessageIcon,
  Close as CloseIcon,
  Chat as ChatIcon
} from '@mui/icons-material';
import MessagePanel from './MessagePanel';
import { useMessage } from '@/hooks/tools/useMessage';

const FloatingMessageBoard = () => {
  const theme = useTheme();
  const [isOpen, setIsOpen] = useState(false);
  const { total } = useMessage();

  const handleToggle = useCallback(() => {
    setIsOpen(prev => !prev);
  }, []);

  const handleClose = useCallback(() => {
    setIsOpen(false);
  }, []);

  return (
    <>
      {/* 悬浮按钮 */}
      <Zoom in={true} timeout={1000}>
        <Fab
          color="primary"
          onClick={handleToggle}
          sx={{
            position: 'fixed',
            bottom: { xs: 16, md: 24 },
            right: { xs: 16, md: 24 },
            zIndex: 1000,
            width: 64,
            height: 64,
            background: 'linear-gradient(135deg, #FF85C0 0%, #FFADD6 100%)',
            color: '#fff',
            boxShadow: '0 4px 20px rgba(255, 133, 192, 0.4)',
            transition: 'all 0.3s ease',
            '&:hover': {
              background: 'linear-gradient(135deg, #FF6BB3 0%, #FF85C0 100%)',
              transform: 'scale(1.1)',
              boxShadow: '0 6px 25px rgba(255, 133, 192, 0.6)',
            },
            '&:active': {
              transform: 'scale(0.95)',
            }
          }}
        >
          <Badge 
            badgeContent={total > 0 ? (total > 99 ? '99+' : total) : 0} 
            color="error"
            sx={{
              '& .MuiBadge-badge': {
                fontSize: '0.7rem',
                minWidth: 18,
                height: 18,
                borderRadius: '9px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.2)'
              }
            }}
          >
            <ChatIcon sx={{ fontSize: 28 }} />
          </Badge>
        </Fab>
      </Zoom>

      {/* 侧边抽屉 */}
      <Drawer
        anchor="right"
        open={isOpen}
        onClose={handleClose}
        sx={{
          zIndex: 1300,
          '& .MuiDrawer-paper': {
            width: { xs: '100vw', sm: 420, md: 480 },
            maxWidth: '100vw',
            borderRadius: { xs: 0, sm: '16px 0 0 16px' },
            background: 'linear-gradient(145deg, #ffffff 0%, #fafbff 100%)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
            overflow: 'hidden'
          }
        }}
        BackdropProps={{
          sx: {
            backgroundColor: alpha(theme.palette.common.black, 0.3),
            backdropFilter: 'blur(4px)'
          }
        }}
      >
        <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          {/* 头部 */}
          <Box
            sx={{
              p: 2,
              borderBottom: '1px solid',
              borderColor: 'divider',
              background: 'linear-gradient(135deg, #FF85C0 0%, #FFADD6 100%)',
              color: '#fff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <MessageIcon sx={{ fontSize: 24 }} />
              <Typography variant="h6" sx={{ fontWeight: 600 }}>
                留言板
              </Typography>
              {total > 0 && (
                <Badge 
                  badgeContent={total > 99 ? '99+' : total} 
                  color="error"
                  sx={{
                    '& .MuiBadge-badge': {
                      fontSize: '0.7rem',
                      backgroundColor: '#fff',
                      color: '#FF85C0',
                      fontWeight: 600
                    }
                  }}
                />
              )}
            </Box>
            <IconButton
              onClick={handleClose}
              sx={{
                color: '#fff',
                '&:hover': {
                  backgroundColor: 'rgba(255,255,255,0.1)'
                }
              }}
            >
              <CloseIcon />
            </IconButton>
          </Box>

          {/* 留言面板内容 */}
          <Box sx={{ flex: 1, overflow: 'hidden' }}>
            <MessagePanel onClose={handleClose} />
          </Box>
        </Box>
      </Drawer>
    </>
  );
};

export default FloatingMessageBoard;